<template>
	<view>
        <u-popup :show="show" mode="bottom"  @close="closeShow" :round="23" closeable>
			<div>
				<div class="popup-con">
					 <div class="audio-text">
						 长按说出您需要产品信息<br/>{{text}}
					 </div>
					 <div class="audio-dh">
						 <div class="line" :style="{opacity:showdh ? 1  : 0}">
							 <div class="one"></div>
							 <div class="two"></div>
							 <div class="three"></div>
							 <div class="four"></div>
							 <div class="five"></div>
						 </div>
						 <div class="center">
							 <div class="hua-tong" @longpress="longpressBtn()" @touchend="touchendBtn()" @touchstart="showdh=true">
								 <img src="https://pic.moresu.com/FhcvOUAQ3cXD6qGrLIoyWGhPQwyS" style="width:77rpx;height:101rpx;display: inline-block;"/>
							 </div>
							 <div class="container">
								 <div class="box" :style="{opacity:showdh ? 1  : 0}">
									 <span style="--i:1" v-show="showdh"></span>
									 <span style="--i:3" v-show="showdh"></span>
									 <span style="--i:5" v-show="showdh"></span>
									 <span style="--i:7" v-show="showdh"></span>
									 <span style="--i:9" v-show="showdh"></span>
									 <span style="--i:11" v-show="showdh"></span>
								 </div>
							 </div>
						 </div>
						 <div class="line" :style="{opacity:showdh ? 1  : 0}">
							 <div class="one"></div>
							 <div class="two"></div>
							 <div class="three"></div>
							 <div class="four"></div>
							 <div class="five"></div>
						 </div>
					 </div>
				</div>
				
			</div>
            
        </u-popup>
	</view>
</template>
<script>

import{imgCheck} from '@/plugins/upload/upload.js'
import {addInquiry} from '@/config/api.js'
import {uploadFilePromise} from '@/plugins/upload/upload.js'
import store from '@/store';
const log = require('@/plugins/log.js')
const recorderManager = uni.getRecorderManager()
const innerAudioContext = uni.createInnerAudioContext()


export default {
    name: 'audioo',
    computed: {
    	
		
    },
	data() {
		return {
           show:false,
		   tempFilePath:'',
		   islongPress:false,
		   showdh:false,
		   text:'松开后自动提交'
		}
	},
    watch:{

    },
	created() {
	
	
	},
	methods: {
		init(){
			this.show = true;
			let self = this;
			innerAudioContext.src= 'https://pic.gxmore.com/2023053010195616854131964497522.mp3';
			innerAudioContext.play();
			recorderManager.onStop((res) => {
				console.log("res",res)
				this.tempFilePath = res.tempFilePath
				this.uploadFile()
				this.text = '松开后自动提交'
			})
		},
		
	   closeShow(){
		   this.show = false
	   },
	   //上传音频
	   uploadFile(){
		   uploadFilePromise(this.tempFilePath).then((res)=>{
			   addInquiry({inquiryType:'voice',voiceFiles:res}).then((res1)=>{
				   this.$emit('showResult',res1)
				   this.closeShow();
				   let text = '智能询价&语音询价录音&' + res
				   log.info(text)
				   // #ifdef MP-WEIXIN
				   wx.requestSubscribeMessage({
				     tmplIds: ['X6m-lruMVe4rf8tMEbcv-nxEeLSWbV9b6TX193jeeKE','R7bgDnCd2c3RcHZvAGVNWmJgmI-AxwL-aUqcGsIpkL4','WF5ac-NgWgW_qSYWsq7hRALuGZtmmvYf9jFsG4w61CA'],
				     success (res) {
				   			
				   		},
				   		fail(res){
				   			// console.log("res",res)
				   		},
				   		complete(){
				   			// console.log("89646456")
				   		}
				   })
				   // #endif
				   
			   })
		   })
	   },
	   // 长按录音事件
		longpressBtn(){
			console.log("点击了")
			this.islongPress = true
			this.showdh = true;
			innerAudioContext.stop();
			this.text = '录音中……'
			const options = {
				sampleRate: 16000, // 采样率
				numberOfChannels: 1, // 录音通道数
				encodeBitRate: 96000, // 编码码率
				format: 'mp3', // 音频格式，有效值 aac/mp3
				frameSize: 10, // 指定帧大小，单位 KB
			}
			recorderManager.start(options);
			// 监听音频开始事件
			recorderManager.onStart((res) => {
				console.log(res)
			})
		},
		
		// 长按松开录音事件
		touchendBtn(){
			console.log("录音结束了")
			this.endRecord();
			setTimeout(() => {
			  this.islongPress = false
			}, 1000)
			
		},
		
		endRecord() {
			let self = this;
			this.showdh = false;
			console.log("islongPress",this.islongPress)
		  if (this.islongPress == false) {
		    uni.showToast({
		      title: '说话时间太短',
		      duration: 1000,
		      icon: 'none'
		    })
		  } else if (this.islongPress == true) {
			this.judgeLogin(() => {
				// console.log("897879")
				 recorderManager.stop();
			});		
		  }
		
		},
	  

          
	}
};
</script>

<style lang="scss" scoped>
	@import '@/style/common.scss';
	.popupTitle{
		font-size:$b-font;
		font-weight: bold;
		text-align: center;
		line-height: 50px;
	}
    .popup-con{
    	padding:0 16px 16px 16px;
    	.popup-block-pay{
    		text-align: center;
    		padding:20px;
    		.price-sub-title{
    			font-size:$s-font;
    			color:$g-font-color;
    			line-height: 30px;
    		}
    		.price-big-title{
    			font-size: 22px;
    			color:$theme-color;
    			font-weight:bold;
    			margin-top:10px;
    		}
    	}
    	.popup-label{
    		line-height: 40px;
    		font-size:$m-font;
    		color:$g-font-color;
    		@include flexbox(space-between,center)
    	}
    	.img-div{
    		width:210px;
    		height:210px;
    		border:1px solid $border-color;
    		margin:0 auto;
    		background: #f4f5f7;
    	}
        .send-list{
    		padding-top:$marginSpace;
    		.send-item{
    			border-radius: 8px;
    			padding:12px;
    			box-shadow: 0 0 5px rgba(0,0,0,0.1);
    			margin-bottom:$marginSpace;
    			.send-top{
    				@include flexbox(flex-start,flex-start);
    				font-size:$m-font;
    				.name{
    					padding-right:12px;
    					flex:1
    				}
    				.num{
    					font-weight: bold;
    					color:$theme-color
    				}
    			}
    			.send-middle{
    				font-size:$s-font;
    				color:$g-font-color;
    				line-height: 18px;
    				margin-top:5px;
    			}
    			.send-bottom{
    				text-align: right;
    				font-size:$s-font;
    				margin-top:16px
    			}
    		}
    	}
    	.category-list{
    		padding:36rpx 0;
    		.list-item{
    			@include flexbox(flex-start,flex-start);
    			margin-bottom:20rpx;
    			.item-title{
    				width: 126rpx;
    				height: 52rpx;
    				background: rgba(255,255,255,0.39);
    				border: 1px solid #B8B8B8;
    				border-radius: 9rpx;
    				font-size:$m-font;
    				text-align: center;
    				line-height: 52rpx;
    			}
    			.item-list{
    				padding-left:30rpx;
    				width:calc(100% - 126rpx);
    				overflow: hidden;
    				.item-ename{
    					font-size:$s-font;
    					color: #929292;
    					line-height: 52rpx;
    					width: 170rpx;
    					@include textoverflow(1);
    					float:left;
    				}
    			}
    		}
    	}
    	.goodsSn-list{
    		border: 1px solid #DEDEDE;
    		padding:0 10px;
    		font-size:$s-font;
    		margin-top:15px;
    		padding-bottom:10px;
    		.list-cell{
    			border-bottom:1px solid #DEDEDE;
    			@include flexbox(space-between,center);
    			line-height: 60rpx;
    			height:60rpx;
    		}
    		.list-cell:first-child{
    			
    		}
    	}
    	.audio-text{
    		font-size: 34rpx;
    		line-height: 48rpx;
    		color: #414141;
    		text-align: center;
    		padding-top:100rpx;
    	}
    	.audio-dh{
    		@include flexbox(space-between,center);
    	}
    
    }
    .popup-bottom{
    	background: #fff;
    	margin-top:10px;
    	padding:16px;
    }
    .popup-bottom-fixed{
    	position: fixed;
    	width:100%;
    	padding:16px;
    	box-sizing: border-box;
    	bottom:0
    }
    
    
</style>
<style scoped>
@keyframes yuying1{
	0%{
		height: 0%;
	}
	20%{
		height: 50%;
	}
	50%{
		height: 100%;
	}
	80%{
		height: 50%;
	}
	100%{
		height: 0%;
	}
}    
.line{
	width: 150rpx;
	height: 132rpx;
	margin: 100rpx 0;   
}
.line .one{
	animation:yuying1 0.6s infinite 0.1s;
   -webkit-animation:yuying1 0.6s infinite 0.1s;
}
.line .two{
	animation:yuying1 0.6s infinite 0.2s;
   -webkit-animation:yuying1 0.6s infinite 0.2s;
}
.line .three{
	animation:yuying1 0.6s infinite 0.3s;
   -webkit-animation:yuying1 0.6s infinite 0.3s;
}
.line .four{
	animation:yuying1 0.6s infinite 0.4s;
   -webkit-animation:yuying1 0.6s infinite 0.4s;
}
.line .five{
	animation:yuying1 0.6s infinite 0.5s;
   -webkit-animation:yuying1 0.6s infinite 0.5s;
}
.one,.two,.three,.four,.five{
	width:9rpx;
	height: 100%;
	margin-left: 16rpx;
	border-radius: 7rpx;
	background-color: #FFF4E5;
	vertical-align: middle;
	display: inline-block;
}
.three{
	background-color:  rgba(255,94,1,0.6); ;
}
.center{
	width:200rpx;
	heigth:200rpx;
	position: relative;
	margin:60rpx;
}
.center .hua-tong{
	width:166rpx;
	height:166rpx;
    background: #FFF7F5;
	text-align: center;
    padding-top:34rpx;
	position: absolute;
	top:67rpx;
	left:17rpx;
	z-index: 2;
	border-radius: 50%;
	box-sizing: border-box;
}

.center .container {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		
	}
 
	.center .container .box {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50rpx 0;
	}

	.center .container .box span {
		position: absolute;
		box-sizing: border-box;
		border: 2rpx solid #FFD5BF;
		border-radius: 50%;
		animation: animate 5s linear infinite;
		animation-delay: calc(0.5s * var(--i))
	}
@keyframes animate {
		0% {
			width: 166rpx;
			height: 166rpx;
		}

		50% {
			opacity: 0.5;
		}

		100% {
			width: 400rpx;
			height: 400rpx;
			opacity: 0;
		}
	}



</style>
